<template>
    <el-dialog @close="reset" title="新增/编辑" v-model="visible">
        <el-form ref="menuForm" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="上级目录" prop="pid">
                <!-- <el-input placeholder="请选择菜单图标"></el-input> -->
                <el-select v-model="formData.pid" placeholder="请选择上级目录">
                    <el-option :value="0" label="一级菜单">
                        一级菜单
                    </el-option>
                    <el-option v-for="item in menu.menuList" :key="item.id" :label="item.title"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜单标题" prop="title">
                <el-input v-model="formData.title" placeholder="请输入菜单标题"></el-input>
            </el-form-item>
            <el-form-item v-if="formData.pid > 0" label="菜单链接" prop="url">
                <el-input v-model="formData.url" placeholder="请输入菜单链接, 比如 /about"></el-input>
            </el-form-item>
            <el-form-item v-if="formData.pid === 0" label="菜单图标" prop="icon">
                <el-select v-model="formData.icon">
                    <el-option value="HelpFilled">
                        <el-icon size="20">
                            <Histogram />
                        </el-icon>
                    </el-option>
                    <el-option value="HelpFilled">
                        <el-icon size="20">
                            <HelpFilled />
                        </el-icon>
                    </el-option>
                    <el-option value="Menu">
                        <el-icon size="20">
                            <Menu />
                        </el-icon>
                    </el-option>
                    <el-option value="Tools">
                        <el-icon size="20">
                            <Tools />
                        </el-icon>
                    </el-option>
                    <el-option value="HomeFilled">
                        <el-icon size="20">
                            <HomeFilled />
                        </el-icon>
                    </el-option>
                    <el-option value="Platform">
                        <el-icon size="20">
                            <Platform />
                        </el-icon>
                    </el-option>
                    <el-option value="OfficeBuilding">
                        <el-icon size="20">
                            <OfficeBuilding />
                        </el-icon>
                    </el-option>
                    <el-option value="Document">
                        <el-icon size="20">
                            <Document />
                        </el-icon>
                    </el-option>

                </el-select>
            </el-form-item>
            <el-form-item label="菜单状态" prop="status">
                <el-radio-group v-model="formData.status">
                    <el-radio :value="1">启用</el-radio>
                    <el-radio :value="2">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="reset">取消</el-button>
            <el-button type="primary" @click="submit">确认提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { menuAdd, menuUpdate } from '@/utils/api'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus';
const store = useStore()
const { state: { menu }, dispatch } = store
const visible = ref(false)
const menuForm = ref(null)

const formData = ref({
    pid: '',
    name: '',
    url: '',
    icon: '',
    status: '',
})
// 接收待编辑菜单数据
const getEditData = (data) => {
    formData.value = { ...data }
    visible.value = true
}
const rules = {
    pid: { required: true, message: '请选择父级菜单', trigger: 'blur' },
    title: { required: true, message: '请输入菜单名称', trigger: 'blur' },
    status: { required: true, message: '请选择菜单状态', trigger: 'blur' },
}
// 重置数据
const reset = () => {
    // 重置表单
    menuForm.value.resetFields()
    // 关闭对话框
    visible.value = false
    // 删除id, 否则之后的操作会收到影响
    delete formData.value.id
}
const submit = () => {
    menuForm.value.validate(async valid => {
        if (valid) {
            let res
            if (formData.value.id > 0) {
                res = await menuUpdate(formData.value);
            } else {
                res = await menuAdd(formData.value);
            }
            const { data } = res
            if (data.code === 200) {
                ElMessage.success(data.msg)
                // 重置表单
                menuForm.value.resetFields()
                // 关闭对话框
                visible.value = false
                // 重新请求最新的菜单列表
                dispatch('menu/getMenuListAction')
                // 删除id, 否则之后的操作会收到影响
                delete formData.value.id
            } else {
                ElMessage.error(data.msg)
            }
        }
    })
}
defineExpose({ visible, getEditData })
</script>

<style></style>